// Tailwind 配置
tailwind.config = {
    theme: {
        extend: {
            colors: {
                primary: '#165DFF',
                secondary: '#36CFC9',
                success: '#52C41A',
                warning: '#FAAD14',
                danger: '#FF4D4F',
                info: '#1890FF',
                dark: '#1D2129',
                'gray-light': '#F2F3F5',
                'gray-medium': '#C9CDD4'
            },
            fontFamily: {
                inter: ['Inter', 'system-ui', 'sans-serif'],
            },
        },
    }
}

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', function() {
    // 初始化API服务
    const apiService = new ApiService();

    // 初始化用户信息
    apiService.getUserInfo().then(userInfo => {
        // 当 API 调用成功后，才会执行这里的代码
        console.log('用户信息:', userInfo);
    });

    // 初始化侧边栏导航
    initSidebarNavigation();

    // 初始化模态框控制
    initModalControl();

    // 初始化按钮功能
    initButtonFunctions();

    // 初始化图表
    initCharts();

    // 初始化用户菜单交互
    initUserMenu();

    // 加载仪表盘数据
    loadDashboardData(apiService);
});

// 初始化侧边栏导航
function initSidebarNavigation() {
    const sidebarItems = document.querySelectorAll('.sidebar-item');
    const viewContents = document.querySelectorAll('.view-content');

    sidebarItems.forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();

            // 移除所有活跃状态
            sidebarItems.forEach(i => i.classList.remove('active'));
            viewContents.forEach(v => v.classList.add('hidden'));

            // 添加当前活跃状态
            this.classList.add('active');
            const targetId = this.getAttribute('data-target');
            document.getElementById(targetId).classList.remove('hidden');

            // 在移动设备上点击导航后收起侧边栏
            if (window.innerWidth < 1024) {
                document.getElementById('sidebar').classList.add('-translate-x-full');
            }
        });
    });

    // 侧边栏切换按钮
    document.getElementById('toggle-sidebar').addEventListener('click', function() {
        const sidebar = document.getElementById('sidebar');
        sidebar.classList.toggle('-translate-x-full');
    });
}

// 初始化模态框控制
function initModalControl() {
    const modal = document.getElementById('product-modal');
    const openModalButtons = document.querySelectorAll('.btn-primary:has(.fa-plus)');
    const closeModalButtons = [document.getElementById('close-modal'), document.getElementById('cancel-modal')];

    openModalButtons.forEach(button => {
        button.addEventListener('click', function() {
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            document.body.style.overflow = 'hidden';
        });
    });

    closeModalButtons.forEach(button => {
        if (button) {
            button.addEventListener('click', function() {
                modal.classList.add('hidden');
                modal.classList.remove('flex');
                document.body.style.overflow = '';
            });
        }
    });

    // 点击模态框外部关闭
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
            document.body.style.overflow = '';
        }
    });
}

// 初始化按钮功能
function initButtonFunctions() {
    // 前往商城按钮功能
    document.getElementById('goto-shop').addEventListener('click', function() {
        const shopUrl = '/shop'; // 商城前台地址
        window.open(shopUrl, '_blank');
    });

    // 前往采集按钮功能
    document.getElementById('goto-collect').addEventListener('click', function() {
        const collectUrl = '/task/collect'; // 采集页面地址
        window.open(collectUrl, '_blank');
    });
}

// 初始化图表
function initCharts() {
    // 销售趋势图表
    const salesCtx = document.getElementById('salesChart')?.getContext('2d');
    if (salesCtx) {
        new Chart(salesCtx, {
            type: 'line',
            data: {
                labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                datasets: [
                    {
                        label: '销售额',
                        data: [18500, 22400, 19800, 25600, 28900, 32400, 24568],
                        borderColor: '#165DFF',
                        backgroundColor: 'rgba(22, 93, 255, 0.1)',
                        tension: 0.4,
                        fill: true
                    },
                    {
                        label: '订单量',
                        data: [850, 980, 890, 1120, 1350, 1580, 1248],
                        borderColor: '#36CFC9',
                        backgroundColor: 'transparent',
                        tension: 0.4,
                        yAxisID: 'y1'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '销售额 (¥)'
                        }
                    },
                    y1: {
                        beginAtZero: true,
                        position: 'right',
                        title: {
                            display: true,
                            text: '订单量'
                        },
                        grid: {
                            drawOnChartArea: false
                        }
                    }
                }
            }
        });
    }

    // 订单状态图表
    const orderStatusCtx = document.getElementById('orderStatusChart')?.getContext('2d');
    if (orderStatusCtx) {
        new Chart(orderStatusCtx, {
            type: 'doughnut',
            data: {
                labels: ['已完成', '配送中', '已付款', '已取消'],
                datasets: [{
                    data: [65, 15, 12, 8],
                    backgroundColor: [
                        '#52C41A',
                        '#FAAD14',
                        '#1890FF',
                        '#FF4D4F'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                },
                cutout: '70%'
            }
        });
    }
}

// 初始化用户菜单交互
function initUserMenu() {
    const userMenuTrigger = document.getElementById('user-menu-trigger');
    const userDropdown = document.getElementById('user-dropdown');

    if (userMenuTrigger && userDropdown) {
        // 点击用户区域显示/隐藏下拉菜单
        userMenuTrigger.addEventListener('click', function(e) {
            e.stopPropagation();
            userDropdown.classList.toggle('hidden');
        });

        // 点击页面其他区域隐藏下拉菜单
        document.addEventListener('click', function() {
            userDropdown.classList.add('hidden');
        });

        // 阻止下拉菜单内部点击事件冒泡
        userDropdown.addEventListener('click', function(e) {
            e.stopPropagation();
        });

        // 个人信息按钮点击事件
        document.getElementById('personal-info-btn')?.addEventListener('click', function(e) {
            e.preventDefault();
            location.href="/userinfo"
        });

        // 退出登录按钮点击事件
        document.getElementById('logout-btn')?.addEventListener('click', function(e) {
            e.preventDefault();
            if(confirm('确定要退出登录吗？')) {
                loginOut();
            }
        });
    }
}

// API服务类
class ApiService {
    constructor() {
        // API基础URL
        this.baseUrl = '/api';

        // 请求头配置
        this.headers = {
            'Content-Type': 'application/json',
            // 可以添加认证信息等
            // 'Authorization': 'Bearer ' + localStorage.getItem('token')
        };
    }

    /**
     * 通用请求方法
     * @param {string} url 请求URL
     * @param {string} method 请求方法
     * @param {object} data 请求数据
     * @returns {Promise}
     */
    async request(url, method = 'GET', data = null) {
        const options = {
            method,
            headers: this.headers,
            credentials: 'include' // 包含cookie信息
        };

        // 如果有数据，添加到请求体
        if (data) {
            options.body = JSON.stringify(data);
        }

        try {
            const response = await fetch(`${this.baseUrl}${url}`, options);

            // 处理HTTP错误状态
            if (!response.ok) {
                throw new Error(`HTTP错误状态: ${response.status}`);
            }

            // 解析JSON响应
            const result = await response.json();
            return result;
        } catch (error) {
            console.error('请求错误:', error);
            // 可以在这里添加全局错误处理，如登录过期等
            throw error;
        }
    }

    // 仪表盘相关接口
    getDashboardData() {
        return this.request('/dashboard');
    }

    // 商品相关接口
    getProducts(params = {}) {
        // 构建查询字符串
        const queryString = new URLSearchParams(params).toString();
        return this.request(`/products${queryString ? '?' + queryString : ''}`);
    }

    getProduct(id) {
        return this.request(`/products/${id}`);
    }

    createProduct(data) {
        return this.request('/products', 'POST', data);
    }

    updateProduct(id, data) {
        return this.request(`/products/${id}`, 'PUT', data);
    }

    deleteProduct(id) {
        return this.request(`/products/${id}`, 'DELETE');
    }

    // 订单相关接口
    getOrders(params = {}) {
        const queryString = new URLSearchParams(params).toString();
        return this.request(`/orders${queryString ? '?' + queryString : ''}`);
    }

    getOrder(id) {
        return this.request(`/orders/${id}`);
    }

    updateOrderStatus(id, status) {
        return this.request(`/orders/${id}/status`, 'PATCH', { status });
    }

    // 用户相关接口
    getUsers(params = {}) {
        const queryString = new URLSearchParams(params).toString();
        return this.request(`/users${queryString ? '?' + queryString : ''}`);
    }

    // 获取用户信息
    getUserInfo() {
        return this.request('/welcome-info')
            .then(data => {
                // 更新UI显示用户信息
                document.getElementById('user-name').textContent = data.data.UserName;
                document.getElementById('user-email').textContent = data.data.UserNick;
                document.getElementById('user-avatar').src = data.data.UserAvatar || '默认头像地址';
                return data;
            })
            .catch(error => {
                console.error('获取用户信息出错:', error);
                // 显示默认信息
                document.getElementById('user-name').textContent = '管理员';
                document.getElementById('user-email').textContent = 'admin@example.com';
            });
    }

    getUser(id) {
        return this.request(`/users/${id}`);
    }

    updateUser(id, data) {
        return this.request(`/users/${id}`, 'PUT', data);
    }

    // 分类相关接口
    getCategories() {
        return this.request('/categories');
    }

    createCategory(data) {
        return this.request('/categories', 'POST', data);
    }

    updateCategory(id, data) {
        return this.request(`/categories/${id}`, 'PUT', data);
    }

    deleteCategory(id) {
        return this.request(`/categories/${id}`, 'DELETE');
    }
}

// 加载仪表盘数据示例
async function loadDashboardData(apiService) {
    try {
        console.log('正在加载仪表盘数据...');
        // 实际项目中取消注释，调用API获取数据
        // const data = await apiService.getDashboardData();
        // console.log('仪表盘数据加载成功:', data);

        // 这里可以添加数据更新逻辑
    } catch (error) {
        console.error('仪表盘数据加载失败:', error);
        // 可以添加错误提示UI
    }
}

// 退出登录功能
function loginOut() {
    const apiService = new ApiService();

    apiService.request('/api/LoginOut', 'GET')
        .then(() => {
            handleLogoutSuccess();
        })
        .catch(error => {
            console.error('退出失败:', error);
            handleLogoutSuccess(); // 即使请求失败也执行退出操作
        });
}

// 处理退出登录成功
function handleLogoutSuccess() {
    // 清除所有Cookie
    document.cookie.split(';').forEach(cookie => {
        const [name] = cookie.trim().split('=');
        document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
    });

    // 清除localStorage和sessionStorage
    localStorage.clear();
    sessionStorage.clear();

    // 跳转到登录页
    window.location.href = '/login_page';
}
